import { useEffect, useState } from "react";
import { Button, Form, Space, Table, Tag } from "antd";
import { Popconfirm } from "antd";
import http from "../../utils/http";
import FormItem from "./components/FormItem";
import SearchForm from "./components/SearchForm";
import { useLoaderData } from "react-router-dom";
import useBtnIsAuth from "../../hooks/useBtnIsAuth";
import ListTable from "./components/ListTable";
import FormAlert from "./components/FormAlert";

// 查询

function Home() {
    const isAddBtn = useBtnIsAuth("add");
    const isDelBtn = useBtnIsAuth("del");
    const isQueryBtn = useBtnIsAuth("query");
    const isEditBtn = useBtnIsAuth("edit");
    console.log(isAddBtn, isDelBtn, isQueryBtn, isEditBtn);

    const [open, setOpen] = useState(false);
    const [form] = Form.useForm();
    const [title, setTitle] = useState("添加");

    const [dataSource, setDataSource] = useState([]);
    const [loading, setLoading] = useState(false);
    const columns = [
        { title: "id", dataIndex: "id" },
        { title: "名称", dataIndex: "name" },
        {
            title: "岗位分类",
            dataIndex: "job",
            render(_, record) {
                const colors = {
                    总经理: "blue",
                    销售员: "green",
                    销售助理: "red",
                };
                return <Tag color={colors[record.job]}>{record.job}</Tag>;
            },
        },
        {
            title: "操作",
            render(_, recode) {
                return (
                    <Space>
                        {isEditBtn && (
                            <Button
                                type="primary"
                                size="small"
                                onClick={() => {
                                    setOpen(true);
                                    form.setFieldsValue(recode);
                                    setTitle("编辑");
                                }}
                            >
                                编辑
                            </Button>
                        )}
                    </Space>
                );
            },
        },
    ];

    const [job, setJob] = useState("");
    const [status, setStatus] = useState("");
    const [name, setName] = useState("");
    const [start_time, setStart_time] = useState("");
    const [end_time, setEnd_time] = useState("");

    const getList = async () => {
        setLoading(true);
        const res = await http.get("http://127.0.0.1:7001/getSchemaList", {
            params: {
                job,
                status,
                name,
                start_time,
                end_time,
            },
        });
        setLoading(false);
        const { code, list } = res.data;
        if (code === 1) {
            setDataSource(list);
        }
    };

    useEffect(() => {
        getList();
    }, [job, status, name, start_time, end_time]);

    const closefn = () => {
        setOpen(false);
        form.resetFields();
    };

    const formSubmit = async (values) => {
        // 提交添加/编辑请求
        if (values.id) {
            const res = await http.put(
                "http://127.0.0.1:7001/editSchema",
                values
            );
            const { code } = res.data;
            if (code === 1) {
                getList();
                closefn();
            }
        } else {
            const res = await http.post(
                "http://127.0.0.1:7001/addSchema",
                values
            );
            const { code } = res.data;
            if (code === 1) {
                getList();
                closefn();
            }
        }
    };

    const searchFN = (values) => {
        setName(values.name);
        setJob(values.job);
    };

    const onReset = () => {
        setName("");
        setJob("");
    };

    return (
        <div>
            {isQueryBtn && (
                <SearchForm searchFN={searchFN} onResetFn={onReset} />
            )}

            {isAddBtn && (
                <Button
                    type="primary"
                    onClick={() => {
                        setOpen(true);
                        setTitle("添加");
                    }}
                >
                    添加
                </Button>
            )}

            <FormAlert
                open={open}
                title={title}
                closefn={closefn}
                form={form}
                formSubmit={formSubmit}
            />
            <ListTable
                columns={columns}
                dataSource={dataSource}
                loading={loading}
            />
        </div>
    );
}

export default Home;

// 分页
// 聊天
// 删除
// 表格状态没有写
